﻿<!DOCTYPE html>
<html>
<head>
    <title>.Net Core WebApi图片上传</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.form.min.js"></script>
</head>
<body>
<h1>通过form表单提交</h1>
<form id="myform" name="myform" method="post" enctype="multipart/form-data" 
                    action="/api/xbs_v1/MiniProgramm/SetMiniProgramm">
    <input type="text" id="ScenicAreaAddress" name="ScenicAreaAddress" />
    <input type="text" id="ContactNumber" name="ContactNumber" />
    <input type="text" id="AboutUs" name="AboutUs" />
    <input type="hidden" id="CoverPicFileName" name="CoverPicFileName" value="223344.jpg" />
    <input type="file" name="files" id="files" value="选择需要上传的文件" multiple />
    <input type="submit" id="submitbtn" value="提交">
</form>

<div>
   上传的图片，返回的地址
   <div id="imglist"></div>
    <img src="/Uploads/2022/02/22/220222062511841860.jpg" />
</div>
<script type="text/javascript">　
　  //前端第一种提交方式
    function  uplpadfile(){
        //获取表单的数据        
        var formdata
        var file = $("#files").get(0);
        var files = file.files;
        var formdata = new FormData();
        for (var i = 0; i < files.length; i++) {
            formdata.append("files", files[i]);
        }
        console.log($('#name').val());
        console.log($('#age').val());
        console.log($('#coverPic').val());
        formdata.append('name', $('#name').val());
        formdata.append('age', $('#age').val());
        formdata.append('coverPic', $('#coverPic').val());
                
        $.ajax({
            type:'post',
            data:formdata,                        
            contentType: false,
            processData: false,
            url:"/api/xbs_v1/MiniProgramm/SetMiniProgramm",
            success:function(result){
                var imglist =result.Data; 
                    for(var i in imglist){
                        $("#imglist").append('<img src="'+imglist[i]+'"/>');
                    }                         
            }
        })

        
    };
</script>

</body>
</html>